<template>
	<view>
		<view class="banner" v-if="bannerList.length > 0">
			<banner :data="bannerList"></banner>
		</view>
		<view class="box goods-title">
			<view class="goods-price">￥
				<text class="goods-price-num">{{goods.price}}</text>
			</view>
			<view class="box-card">
				<view>
					<text class="">{{goods.name}}</text>
				</view>
				<view class="uni-my-5">
					<uni-tag :inverted="true" :text="tag" type="warning" v-for="(tag, i) in tagList" :key="i" class="uni-mr-5"/>
				</view>
			</view>
		</view>
		<view class="box box-card">
			<view class="box-flex-start">
				<view class="title-section"></view>
				<view>商品详情</view>
			</view>
			<view class="uni-mt-5" style="width: 650rpx;">
				<rich-text :nodes="goods.description"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import banner from '@/components/banner/banner.vue'
	export default {
		components: {
			banner
		},
		data() {
			return {
				goodsId: '',
				goods: {},
				bannerList: [],
				tagList: []
			}
		},
		onLoad(option) {
			this.goodsId = option.id;
			this.init()
		},
		methods: {
			init(){
				this.$api.post('/goods/getById', {id: this.goodsId}).then(res => {
					let goods = res.data;
					this.goods = res.data;
					let images = goods.bannerImages.split(',');
					images.forEach(item=>{
						this.bannerList.push({
							imageUrl: item,
							linkUrl: ''
						})
					})
					this.tagList = goods.tag.split(',')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner{
		/deep/ .swiper-box{
			height: 300px;
			.swiper-item {
				image {
					height: 300px;
				}
			}
		}
	}
	.goods-title{
		background-color: #e43d33;
		border-radius: 24rpx;
		.goods-price {
			padding: 20rpx 30rpx;
			color: #fff;
			.goods-price-num{
				font-size: 18px;
			}
		}
		.goods-name{
			color: $uni-main-color;
		}
	}
</style>
